<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>

	<script>
		const data = [
			// province 省对应的编码 
			{ code: "110000", name: "北京市", province: "11" },
			{ code: "120000", name: "天津市", province: "12" },
			{ code: "130000", name: "河北省", province: "13" },
		]

		// 核心：对于下拉框，区分 innerHTML 与 value 的区别
		//   innerHTML: 给下拉框去设置内容
		//   value：     可以去获取，设置 到下拉框的值

		// 需求：将数据渲染到省份下拉框中
		// map() + join() + innerHTML 

		const res = data.map(item => `
			<option value="${item.province}">${item.name} ---- 哈哈哈  </option>
		`).join('')
		console.log(res)

		// innerHTML ： 给省份下拉框去设置内容
		// 带上 请选择省份 
		document.querySelector('#province').innerHTML = '<option value="">请选择省份</option>' + res

		// 获取到用户选择的下拉框的结果 ==> 表单元素通过value属性去获取，需要确保下拉框的option标签是有value属性和值



		// 需求：默认选中 天津市

		// 获取下拉框的值
		// document.querySelector('#province').value 

		// 设置
		document.querySelector('#province').value = 13
	</script>
</body>

</html>